
<template>
<div class="yizhan">
  <!--  搜索框-->
  <div class="searchAndDate cf">
    <div class="search">
      <span>试卷名：</span>
      <el-input v-model="searchContent.name" placeholder="请输入内容"  class="searchInputSize"></el-input>
    </div>
    <div class="date">
      <span>添加时间：</span>
      <el-date-picker
              v-model="searchContent.createtime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
  </div>
  <!--  添加试卷-->
  <el-button type="primary" @click="addYizhan" style="margin:5px 0 10px 0">添加试卷</el-button>
  <el-dialog title="添加试卷" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <!--      试卷ID-->
      <el-form-item label="ID" :label-width="formLabelWidth">
        <el-input v-model="form.id" autocomplete="off"></el-input>
      </el-form-item>
      <!--      试卷名-->
      <el-form-item label="试卷名" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <!--      试卷简介-->
      <el-form-item label="试卷简介" :label-width="formLabelWidth">
        <el-input v-model="form.simplyintroduce" autocomplete="off"></el-input>
      </el-form-item>
      <!--      试卷封面-->+
        <el-form-item label="封面" :label-width="formLabelWidth">
        <el-upload
              :file-list="uploadImage"
              name="file"
              action="http://localhost:8080/heartmark/upload"
              list-type="picture-card"
              :auto-upload="true"
              :on-success="uploadImg">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)">
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)">
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)">
          <i class="el-icon-delete"></i>
        </span>
      </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="putForm">确 定</el-button>
    </div>
  </el-dialog>
<!--  表格-->
  <div class="formTable">
    <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{'text-align': 'center',backgroundColor: '#1890ff',color:'#fff'}"
        :cell-style="{'text-align': 'center'}">
      <el-table-column
          prop="id"
          label="试卷号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="试卷名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="simplyintroduce"
          label="试卷简介">
      </el-table-column>
      <el-table-column
              label="试卷图片">
        <template slot-scope="scope">
          <el-image
          style="width: 100px;height: 100px"
          :src="'http://localhost:8080/heartmark/downImg?filename='+scope.row.picture"
          fit="fill">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
              prop="total"
              label="题目数量">
      </el-table-column>
      <el-table-column
          prop="createtime"
          label="添加时间">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
                  size="20"
                  type="text"
                  @click="TestContext(scope.row)">试卷内容</el-button><br>
          <el-button
                  size="20"
                  type="text"
                  @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
                  size="20"
                  type="text"
                  @click="deleteClick(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
    <el-dialog title="试卷内容" :visible.sync="TestVisibile">
        <el-table
                :data="testTable"
                style="width: 100%;height: 30%"
                :header-cell-style="{'text-align': 'center',backgroundColor: '#1890ff',color:'#fff'}"
                :cell-style="{'text-align': 'center'}">
            <el-table-column
                    prop="cid"
                    label="题号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="题目"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容">
            </el-table-column>
        </el-table>
    </el-dialog>
  <!--    分页-->
  <div class="table-pagination">
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="CurrentChange"
            :current-page="params.page"
            :page-sizes="arr"
            :page-size="params.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="500">
    </el-pagination>
  </div>
</div>
</template>
<script>
  export default {

    name: "YiZhanComponent",
    data(){
      return{
        uploadImage:[],
        testTable:[],
          TestVisibile:false,
        //图片上传
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        //分页
        arr:[5,10,15,20],
        params:{name: '',page:1,size:5},
        //page对象
        page:{
          pageSize:5,
          currentPage:1,
          total:100
        },
        //搜索框数据模型
        searchContent:{
          name:"",
          createtime:[],
        },
        //表单数据模型
        tableData:[],
        url:'',
        index:'',
        row:{},
        //对话框数据模型
        form:{
          id:"",
          name:"",
          simplyintroduce:"",
          picture:"",
          total:"",
          mode:1,
        },
        //小区选项数据模型
        xiaoQuOption:[],
        formLabelWidth: '120px',
        dialogFormVisible:false
      }
    },
    computed:{
      getCommunityName(){
        return this.tableData.courierStationProvince+this.tableData.courierStationCity+this.tableData.courierStationDistrict+this.tableData.courierStationAddress+'';
      }
    },
    methods:{
      //上传相关方法
      handleRemove(file) {
        console.log(file);
        this.uploadImage=this.uploadImage.filter(item=>item.name !== file.name);
        if (this.uploadImage.length === 0){
          this.form.picture = "";
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      uploadImg(resp,file,fileList){
        console.log(resp.data);
        if (resp.code ===200){
          this.form.picture=resp.data;
          this.uploadImage = fileList
        }else{
          this.$message("上传失败")
        }

      },
      //日期格式化
      formatDateTime(date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        const hours = String(date.getHours()).padStart(2, '0');
        const minutes = String(date.getMinutes()).padStart(2, '0');
        const seconds = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      //搜索框
      searchClick(){
        this.axios.get('/heartmark/selectByName',
                {
                  params:{
                    //传输的参数
                    name:this.searchContent.name===undefined?'':this.searchContent.name,
                    startTime:this.searchContent.createtime[0]===undefined?'':this.formatDateTime(this.searchContent.createtime[0]),
                    endTime:this.searchContent.createtime[1]===undefined?'':this.formatDateTime(this.searchContent.createtime[1]),
                  }
                }
        ).then((res)=>{
          //处理响应数据
          console.log(res);
          //真正需要的数据
          console.log(res.data.data);
          //将得到的数据加载到tableData
          this.tableData=res.data.data;
        }).catch(err=>{})
      },
      //编辑
      handleEdit(row){
        this.row=row;
        this.dialogDataShow();
        this.dialogFormVisible=true;
        this.form.mode=2;
      },
      //查看题目信息
      TestContext(row){
          this.row=row;
        this.TestVisibile=true;
        console.log(row.id)
          this.axios.get("/heartmark/selectAllAnd",{
            params:{
              id:row.id,
              pageNum:1,
              pageSize:5,
            }
          }).then((res)=>{
            //将得到的数据加载到tableData
            console.log(res.data.data.list)

            if (res.data.data.list.length === 0){
              this.testTable = []
            }else{
              this.testTable = res.data.data.list[0].heartmarktopicList
            }

          }).catch(err=>{})

      },
      //删除小区
      deleteClick(index){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.delete("/heartmark/delete", {
          params:{id:index.id
          }
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.flushTable();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //初始化刷新表格数据
      flushTable(){
        this.axios.get('/heartmark/selectAll',
                {
                  params:{
                    pageNum:1,
                    pageSize:5,
                  }
                }
        ).then((res)=>{
          //将得到的数据加载到tableData
          console.log(res)
          this.tableData=res.data.data;
        }).catch(err=>{})
      },
      //添加驿站按钮触发
      addYizhan(){
        this.dialogFormVisible=true;
      },
      //获取试卷列表
      getXiaoQuOption(){
        this.axios.get("/heartmark/selectAll",
                {
                  params:{
                    pageNum:1,
                    pageSize:5,
                  }
                }).then((response) => {
          console.log(response.data.data)
          this.tableData=response.data.data;
        }).catch(err=>{
          console.log("获取小区列表失败")});
      },
      //添加或修改试卷信息
      putForm(){
        //TODO:验证id传输是否成功
        // console.log(this.from.courierStationCommunityId);
        //增加操作
        if (this.form.mode===1){
          this.axios.post("/heartmark/insert",
                  {
                    id:"",
                    name:this.form.name,
                    simplyintroduce:this.form.simplyintroduce,
                    picture:this.form.picture,
                    createtime:""
                  }
          ).then((response) => {
            console.log(response);
            this.dialogFormVisible=false;
            this.flushTable();
          }).catch((err)=>{
            console.log("增加失败")})
        }else {
          // if (this.row.picture == null || this.row.picture === ""){
          //   this.row.picture=this.form.picture;
          // }
          //修改
          this.axios.put("/heartmark/update",
                  {
                    id:this.form.id,
                    name:this.form.name,
                    simplyintroduce:this.form.simplyintroduce,
                    picture:this.form.picture,
                    createtime:""
                  }
          ).then((response) => {
            this.form.mode=1;
            this.dialogFormVisible=false;
            this.clearFrom();
            this.flushTable();
          }).catch((err)=>{
            console.log("修改失败")})
        }
      },
      //清空试卷对话框
      clearFrom(){
        this.form.id='';
        this.form.name='';
        this.form.simplyintroduce='';
        this.form.picture='';
        this.form.total='';
      },
      //试卷对话框数据回显
      dialogDataShow(){
        this.form.id=this.row.id;
        this.form.name=this.row.name;
        this.form.simplyintroduce=this.row.simplyintroduce;
        this.form.picture=this.row.picture
      },
      //分页查询
      CurrentChange(val) {
        this.params.page=val;
        this.m3();
      },
      handleSizeChange(val){
        this.params.size=val;
        this.m3();
      },
      m3() {
        this.axios.get('/heartmark/selectAll',
                {
                  params:{
                    //传输的参数
                    pageNum:this.params.page,
                    pageSize:this.params.size,
                  }
                }
        ).then((res)=>{
          //处理响应数据
          console.log(res);
          //真正需要的数据
          console.log(res.data.data);
          //将得到的数据加载到tableData
          this.tableData=res.data.data;
          this.count=res.data.pageNum
        }).catch(err=>{})
      },
    },
    //初始化试卷数据
    created() {
      this.flushTable();
      // this.getAllProvinceAndCityList();
      this.getXiaoQuOption();
    }
  }
</script>

<style scoped>
.search{
  width: 320px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}
.date{
  width: 430px;
  height: 36px;
  margin-right: 20px;
  margin-bottom: 10px;
  float: left;
}
.searchInputSize{
  box-sizing: border-box;
  width: 200px;
  height: 36px;
  padding: 0 15px;
}
.searchAndDate{
  margin-top: 30px;
}
.table-pagination{
  float: right;
  margin: 10px 10px 0 0;
}
</style>